<script setup lang="ts">
/* eslint-disable vue/require-v-for-key */
import { Ref } from 'vue';
import { ArrowLeft, Close, Plus, ArrowRight, Edit, Delete } from '@element-plus/icons-vue';
import { useNodeConfig } from '../hooks';
import { IBranchNodeConfig, IConditionNodeConfig, ENodeType, EConditionMode, AddNodeType, IConditionGroup } from '../types';
import AddNode from './AddNode.vue';

const model = defineModel<IBranchNodeConfig>({ default: {} });

const { drawerVisible, nodeTitleRef, editTitle, isEditTitle, show: commonShow, nodeConfig } = useNodeConfig(model);

const form = ref({}) as Ref<IConditionNodeConfig>;

const index = ref(0);
function show(i: number) {
	index.value = i;
	form.value = JSON.parse(JSON.stringify(nodeConfig.value.conditionNodes[i]));
	commonShow();
}

function addTerm() {
	let len = nodeConfig.value.conditionNodes.length + 1;
	nodeConfig.value.conditionNodes.push({
		nodeName: '条件' + len,
		type: ENodeType.CONDITION,
		priorityLevel: len,
		conditionMode: EConditionMode.AND,
		conditionList: [],
	});
}
function reData(data: AddNodeType, addData: AddNodeType) {
	if (!data.childNode) {
		data.childNode = addData;
	} else {
		reData(data.childNode, addData);
	}
}
function delTerm(index: number) {
	nodeConfig.value.conditionNodes.splice(index, 1);
	if (nodeConfig.value.conditionNodes.length == 1) {
		if (nodeConfig.value.childNode) {
			if (nodeConfig.value.conditionNodes[0].childNode) {
				reData(nodeConfig.value.conditionNodes[0].childNode, nodeConfig.value.childNode);
			} else {
				nodeConfig.value.conditionNodes[0].childNode = nodeConfig.value.childNode;
			}
		}
		// @ts-ignore
		model.value = nodeConfig.value.conditionNodes[0].childNode;
	}
}
function arrTransfer(index: number, type = 1) {
	nodeConfig.value.conditionNodes[index] = nodeConfig.value.conditionNodes.splice(index + type, 1, nodeConfig.value.conditionNodes[index])[0];
	nodeConfig.value.conditionNodes.map((item, index) => {
		item.priorityLevel = index + 1;
	});
	model.value = nodeConfig.value;
}

function deleteConditionList(conditionList: IConditionGroup, index: number) {
	conditionList.splice(index, 1);
}

function toText(nodeConfig: IBranchNodeConfig, index: number) {
	var { conditionList } = nodeConfig.conditionNodes[index];
	if (conditionList && conditionList.length == 1) {
		const text = conditionList.map((conditionGroup) => conditionGroup.map((item) => `${item.label}${item.operator}${item.value}`)).join(' 和 ');
		return text;
	} else if (conditionList && conditionList.length > 1) {
		return conditionList.length + '个条件，或满足';
	} else {
		if (index == nodeConfig.conditionNodes.length - 1) {
			return '其他条件进入此流程';
		} else {
			return false;
		}
	}
}

function save() {
	nodeConfig.value.conditionNodes[index.value] = form.value;
	model.value = nodeConfig.value;
	drawerVisible.value = false;
}

function addConditionGroup() {
	addConditionList(form.value.conditionList[form.value.conditionList.push([]) - 1]);
}
function addConditionList(conditionList: IConditionGroup) {
	conditionList.push({
		label: '',
		field: '',
		operator: '=',
		value: '',
	});
}

function deleteConditionGroup(index: number) {
	form.value.conditionList.splice(index, 1);
}
</script>

<template>
	<div class="branch-wrap">
		<div class="branch-box-wrap">
			<div class="branch-box">
				<el-button class="add-branch" type="success" plain round @click="addTerm">添加条件</el-button>
				<div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
					<div class="condition-node">
						<div class="condition-node-box">
							<div class="auto-judge" @click="show(index)">
								<div class="sort-left" v-if="index != 0" @click.stop="arrTransfer(index, -1)">
									<el-icon>
										<ArrowLeft />
									</el-icon>
								</div>
								<div class="title">
									<span class="node-title">{{ item.nodeName }}</span>
									<span class="priority-title">优先级{{ item.priorityLevel }}</span>
									<el-icon class="close" @click.stop="delTerm(index)">
										<Close />
									</el-icon>
								</div>
								<div class="content">
									<span v-if="toText(nodeConfig, index)">{{ toText(nodeConfig, index) }}</span>
									<span v-else class="placeholder">请设置条件</span>
								</div>
								<div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1" @click.stop="arrTransfer(index)">
									<el-icon>
										<ArrowRight />
									</el-icon>
								</div>
							</div>
							<add-node v-model="item.childNode"></add-node>
						</div>
					</div>
					<slot v-if="item.childNode" :node="item"></slot>
					<div class="top-left-cover-line" v-if="index == 0"></div>
					<div class="bottom-left-cover-line" v-if="index == 0"></div>
					<div class="top-right-cover-line" v-if="index == nodeConfig.conditionNodes.length - 1"></div>
					<div class="bottom-right-cover-line" v-if="index == nodeConfig.conditionNodes.length - 1"></div>
				</div>
			</div>
			<add-node v-model="nodeConfig.childNode"></add-node>
		</div>
		<el-drawer title="条件设置" v-model="drawerVisible" destroy-on-close append-to-body :size="600">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle"
						>{{ form.nodeName
						}}<el-icon class="node-wrap-drawer__title-edit">
							<Edit /> </el-icon
					></label>
					<el-input
						v-if="isEditTitle"
						ref="nodeTitleRef"
						v-model="form.nodeName"
						clearable
						@blur="isEditTitle = false"
						@keyup.enter="isEditTitle = false"
					></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding: 0 20px 20px 20px">
					<div class="top-tips">满足以下条件时进入当前分支</div>
					<template v-for="(conditionGroup, conditionGroupIdx) in form.conditionList">
						<div class="or-branch-link-tip" v-if="conditionGroupIdx != 0">或满足</div>
						<div class="condition-group-editor">
							<div class="header">
								<span>条件组 {{ conditionGroupIdx + 1 }}</span>
								<div @click="deleteConditionGroup(conditionGroupIdx)">
									<el-icon class="branch-delete-icon">
										<Delete />
									</el-icon>
								</div>
							</div>

							<div class="main-content">
								<!-- 单个条件 -->
								<div class="condition-content-box cell-box">
									<div>描述</div>
									<div>条件字段</div>
									<div>运算符</div>
									<div>值</div>
								</div>
								<div class="condition-content" v-for="(condition, idx) in conditionGroup">
									<div class="condition-relation">
										<span>{{ idx == 0 ? '当' : '且' }}</span>
										<div @click="deleteConditionList(conditionGroup, idx)">
											<el-icon class="branch-delete-icon">
												<Delete />
											</el-icon>
										</div>
									</div>
									<div class="condition-content">
										<div class="condition-content-box">
											<el-input v-model="condition.label" placeholder="描述" />
											<el-input v-model="condition.field" placeholder="条件字段" />
											<el-select v-model="condition.operator" placeholder="Select">
												<el-option label="等于" value="="></el-option>
												<el-option label="不等于" value="!="></el-option>
												<el-option label="大于" value=">"></el-option>
												<el-option label="大于等于" value=">="></el-option>
												<el-option label="小于" value="<"></el-option>
												<el-option label="小于等于" value="<="></el-option>
												<el-option label="包含" value="include"></el-option>
												<el-option label="不包含" value="notinclude"></el-option>
											</el-select>
											<el-input v-model="condition.value" placeholder="值" />
										</div>
									</div>
								</div>
							</div>
							<div class="sub-content">
								<el-button link type="primary" @click="addConditionList(conditionGroup)" :icon="Plus"> 添加条件 </el-button>
							</div>
						</div>
					</template>

					<el-button style="width: 100%" type="info" :icon="Plus" text bg @click="addConditionGroup"> 添加条件组 </el-button>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawerVisible = false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<style scoped lang="scss">
.top-tips {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	color: #646a73;
}

.or-branch-link-tip {
	margin: 10px 0;
	color: #646a73;
}

.condition-group-editor {
	user-select: none;
	border-radius: 4px;
	border: 1px solid #e4e5e7;
	position: relative;
	margin-bottom: 16px;

	.branch-delete-icon {
		font-size: 18px;
	}

	.header {
		background-color: #f4f6f8;
		padding: 0 12px;
		font-size: 14px;
		color: #171e31;
		height: 36px;
		display: flex;
		align-items: center;

		span {
			flex: 1;
		}
	}

	.main-content {
		padding: 0 12px;

		.condition-relation {
			color: #9ca2a9;
			display: flex;
			align-items: center;
			height: 36px;
			display: flex;
			justify-content: space-between;
			padding: 0 2px;
		}

		.condition-content-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				width: 100%;
				min-width: 120px;
			}

			div:not(:first-child) {
				margin-left: 16px;
			}
		}

		.cell-box {
			div {
				padding: 16px 0;
				width: 100%;
				min-width: 120px;
				color: #909399;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
			}
		}

		.condition-content {
			display: flex;
			flex-direction: column;

			:deep(.el-input__wrapper) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

			.content {
				flex: 1;
				padding: 0 0 4px 0;
				display: flex;
				align-items: center;
				min-height: 31.6px;
				flex-wrap: wrap;
			}
		}
	}

	.sub-content {
		padding: 12px;
	}
}
</style>
